<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=
  , initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 常量路由: 全部用户都可以访问到的路由
    const constanRoutes = [
    { 
      // 登录
      path: '/login',
      component: () => import('@/views/login/index.vue'),
      name: 'login',
      // hidden控制路由是否在菜单中隐藏
      meta: {title: '登录', hidden: true, icon: 'Avatar'}
    },
    {
      // 登陆成功后
      path: '/',
      component: () => import('@/views/layout/index.vue'),
      name: 'layout',
      // meta: {title: 'layout', hidden: false, icon: 'Avatar'},
      meta: { hidden: false},
      redirect: '/home',
      children: [
        {
          path: '/home',
          component: () => import('@/views/home/index.vue'),
          meta: {title: '首页', hidden: false, icon: 'HomeFilled'}
        }
      ]
    },
    {
      path: '/screen',
      component: () => import('@/views/screen/index.vue'),
      name: 'Screen',
      meta: {title: '数据大屏', hidden: false, icon: 'Platform'}
    },

    {
      path: '/404',
      component: () => import('@/views/404/index.vue'),
      name: '404',
      meta: {title: '404', hidden: true, icon: 'DocumentDelete'}
    },
  ] 

    // 异步路由: 有的人有这个路由 有的没有 动态追加异步路由
    const asyncRoute = [
      {
        path: '/acl',
        component: () => import('@/views/layout/index.vue'),
        name: 'Acl',
        meta: {title: '权限管理', hidden: false, icon: 'Lock'},
        redirect: '/acl/user',
        children: [
          { 
            name: 'User',
            path: '/acl/user',
            component: () => import('@/views/acl/user/index.vue'),
            meta: {title: '用户管理', hidden: false, icon: 'User'}
          },
          { 
            name: 'Role',
            path: '/acl/role',
            component: () => import('@/views/acl/role/index.vue'),
            meta: {title: '角色管理', hidden: false, icon: 'UserFilled'}
          },
          { 
            name: 'Permission',
            path: '/acl/permission',
            component: () => import('@/views/acl/permission/index.vue'),
            meta: {title: '权限管理', hidden: false, icon: 'Monitor'}
          },
        ]
      },
      {
        path: '/product',
        component: () => import('@/views/layout/index.vue'),
        name: 'Product',
        meta: {title: '商品管理', hidden: false, icon: 'Goods'},
        redirect: '/product/trademark',
        children: [
          {
            name: 'Trademark',
            path: '/product/trademark',
            component: () => import('@/views/product/trademark/index.vue'),
            meta: {title: '品牌管理', hidden: false, icon: 'ShoppingCartFull'},
          },
          {
            name: 'Attr',
            path: '/product/attr',
            component: () => import('@/views/product/attr/index.vue'),
            meta: {title: '属性管理', hidden: false, icon: 'ChromeFilled'},
          },
          {
            name: 'Spu',
            path: '/product/spu',
            component: () => import('@/views/product/spu/index.vue'),
            meta: {title: 'SPU管理', hidden: false, icon: 'Calendar'},
          },
          {
            name: 'Sku',
            path: '/product/sku',
            component: () => import('@/views/product/sku/index.vue'),
            meta: {title: 'SKU管理', hidden: false, icon: 'Orange'},
          }
        ]
      },
    ]

    // 任意路由
    const anyRoute = [
    {
      // 以上都没有匹配到
      path: '/:pathMatch(.*)*',
      redirect: '/404',
      name: 'Any',
      meta: {title: '任意路由', hidden: true, icon: 'DocumentDelete'}
    }
  ]


    //用户数据: routes['Product','Trademark','Sku']
    // 过滤出能访问的异步路由
    const guigu333 = ['Product','Trademark','Sku']
    function filterAsyncRoute (asyncRoute, routes) {
      return asyncRoute.filter(item => {
        // 这只能过滤出符合条件的一级路由 一级路由下的children没有过滤
        if(routes.includes(item.name)) {
          // 利用递归过滤二级路由
          if(item.children&&item.children.length>0) {
            // 过滤出来的结果重新赋值给一级的children
            item.children = filterAsyncRoute(item.children, routes)
          }
          return true
        }
      })
    }
    
    const guigu333Res = filterAsyncRoute(asyncRoute, guigu333)
    console.log(guigu333Res)
    // 硅谷333需要展示的路由 过滤完之后 原asyncRoute中的数据会发生变化, item.children会被替换成符合条件的 
    // 下个用户登录 应该用原asyncRoute进行比较
    console.log([...constanRoutes, ...guigu333Res, ...anyRoute], '硅谷333')

    // 第二个登录 异步路由发生变化 得用深拷贝
    const guigu444 = ['Product','Sku']
    console.log(asyncRoute)





  </script>
</body>
</html>